<template>
  <div class="sec_banner">
    <div class="warn-box">
      <svg-icon
        style="margin-right:17px"
        icon-class="warn"
        :size="20"
      />
      <p><span>图片要求！</span><br />图片宽度690px，高度170px。</p>
    </div>
    <template v-for="(item, index) in bannerList">
      <banner-form
        style="margin-top:10px"
        :key="index"
        :item-index="index"
        :show-tool="true"
        :form-data="item"
        type="secBanner"
        @upSortItem="upSortItem(index)"
        @downSortItem="downSortItem(index)"
        @deleteItem="deleteItem(index)"
      ></banner-form>
    </template>
    <el-divider v-if="bannerList.length > 0 && bannerList.length < 5"></el-divider>
    <div
      v-if="bannerList.length < 5"
      class="add-div"
      @click="addItem"
    >
      <i class="el-icon-plus"></i>添加图片({{bannerList.length}}/5)
    </div>
  </div>
</template>

<script>
import bannerForm from "../components/bannerForm";
export default {
  components: { bannerForm },
  data() {
    return {
      bannerList: []
    }
  },
  methods: {
    // 升序
    upSortItem(index) {
      if (index === 0) {
        return;
      }
      let item = this.bannerList[index];
      this.$set(this.bannerList, index, this.bannerList[index - 1]);
      this.$set(this.bannerList, index - 1, item);
    },
    // 降序
    downSortItem(index) {
      if (index === this.bannerList.length - 1) {
        return;
      }
      let item = this.bannerList[index];
      this.$set(this.bannerList, index, this.bannerList[index + 1]);
      this.$set(this.bannerList, index + 1, item);
    },
    // 删除推荐位
    deleteItem(index) {
      this.bannerList.splice(index, 1);
    },
    addItem() {
      this.bannerList.push({
        img: '',
        jumpType: '',
        jumpUrl: '',
        goods: {}
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
